<template>
	<view class="title">
		<text class="iconfont" @click="log">&#xe6b1;拼团折扣</text>
	</view>
	<view class="listshop">
		<!-- 一个商品 -->
		<view class="list" v-for="(v,i) in listAll" :key="i" @click="skip(v)">
			<view class="list_left">
				<image :src="ip+v.yp_imgsrc" mode="" ></image>
			</view>
			<view class="list_right">
				<view class="list_l_left">
					<text>{{v.yp_yaoqi}} &nbsp;{{v.yp_mingcheng}}</text>
				</view>
				<view class="list_r_right">
					<text>￥{{v.pt_jiage}}</text>
					<text>￥{{v.pt_tuangoujiage}}</text>
				</view>
				<view class="list_r_text">
					<text>{{v.pt_renshu}}人拼</text>
					<text>以拼234234件</text>
				</view>
			</view>
		</view>
		<!-- 一个商品 -->

	</view>
</template>

<script>
	import {reactive,toRefs,onMounted,computed} from 'vue'
	import {useStore} from 'vuex'
	import store from '../../store/index.js'
	import http from '../../utils/http.js'
	export default {
		setup(){
			const {state,getters,commit,dispatch} = useStore()
			onMounted(()=>{
				http({
					url:'/showDiscount',
					method:'get',
				}).then((res)=>{
					// console.log(res)
					commit('DG/ceshi',res.data.data)
				})
				// console.log(state.DG.count)
			})
			let data = reactive({
				listAll:computed(()=>{
					return state.DG.count
				}),
				ip:state.IP,
				log(){
					console.log(state.DG.count)
					console.log(data.listAll)
					console.log(data.ip)
				},
				skip(data){
					uni.navigateTo({
						url: '../DiscountXiang/DiscountXiang?pt_id='+JSON.stringify(data)
					});
					// console.log(data)
				}
			})
			return {...toRefs(data)}
		},
		// onLoad() {
		// 	http({
		// 		url:'/showDiscount',
		// 		method:'get',
		// 	}).then((res)=>{
		// 		// console.log(res)
		// 		// commit('DG/ceshi',res.data.data)
		// 		this.$store.commit('DG/ceshi',res.data.data)
		// 		console.log(this.$store.state.DG.count)
		// 	})
		// 	// console.log(state.DG.count)
		// }
	}
</script>

<style lang="less">
	@import url("~@/static/fonts/iconfont.css");

	.title {
		border-bottom: 1px solid #c8c8c8;
		padding: 20rpx 10rpx;
	}
	
	.daojishi {
		font-size: 30rpx;
		text-align: center;
		padding: 20rpx 0;
	
	}
	
	.listshop {
		background-color: #ebeaec;
		
		.list:not(:first-child) {
			margin-top: 30rpx;
		}
	}
	
	.list:after {
		display: block;
		content: '';
		clear: both;
	}
	
	.list {
		padding: 20rpx 0rpx 40rpx 10rpx;
		background-color: white;
		font-size: 35rpx;
	
		.list_left {
			float: left;
	
			image {
				width: 180rpx;
				height: 200rpx;
			}
		}
	
		.list_right {
			// float: left;
			padding-top: 20rpx;
			box-sizing: border-box;
	
			.list_l_left {
				text {
					margin-left: 40rpx;
				}
			}
	
			.list_r_right {
				padding-top: 20rpx;
	
				text:nth-child(1) {
					margin-left: 60rpx;
					color: red;
				}
	
				text:nth-child(2) {
					margin-left: 60rpx;
					text-decoration: line-through;
					color: #8F8F94;
				}
			}
			.list_r_text{
				margin-top: 40rpx;
				font-size: 30rpx;
				text:nth-child(1) {
					margin-left: 60rpx;
					color: #8F8F94;
					border: 1px solid red;
					padding: 10rpx;
				}
					
				text:nth-child(2) {
					margin-left: 60rpx;
					text-decoration: line-through;
					color: #8F8F94;
				}
			}
			
		}
	
	}
</style>
